﻿
<!DOCTYPE html>
<html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular Monday</title>

    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    

    <script src="Scripts/angular.js"></script>

    <script src="Scripts/angular-ui/ui-bootstrap.js"></script>

    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


    <script src="Scripts/myApp.js"></script>
</head>
<body>
    Hello World {{5 + 5}}
    <br />
    <div ng-controller="HomeController">
       
        <!-- progress bar -->
        <div class="col-sm-4"><progressbar class="progress-striped active" max="100" value="userCount" type="danger"><i>{{userCount}}/100</i></progressbar></div>

         <!--{{greeting}} : {{userName}}-->

        <!-- input fields -->
        <input type="text" name="fName" ng-model="userName" placeholder="Name" /><br />
        <input type="text" name="city" ng-model="userCity" placeholder="City" /><br />
        <!-- Rating system -->
        <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
        <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
        
        <!--<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>-->

        <!-- 'add' btn -->
        <button ng-show="!editMode" ng-click="getUserDetails()">Add</button>
        <!-- 'save change' btn -->
        <button ng-show="editMode" ng-click="saveUserDetails()" >Save Changes</button>

        <!-- 'modal' btn -->
        <button class="btn btn-default" ng-click="open('sm')">Small modal</button>

        <hr />

        <!-- table to render all data-->
        <table class="table table-bordered table-striped">
            <tr><th>INDEX</th><th>Name</th><th>City</th><th>Rating</th><th>Actions</th></tr>
            <tr ng-repeat="c in myContacts">
                <td>{{$index}}</td><td>{{c.name}}</td><td>{{c.city}}</td><td>{{c.rate}}</td><td><button class="btn btn-danger" ng-click="doEditUser($index)" >Edit</button> <button class="btn btn-default" ng-click="doDelete($index)">DELETE</button></td>
            </tr>
        </table>


        <!-- modal... -->
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <ul>
                    <li ng-repeat="item in items">
                        <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                </ul>
                Selected: <b>{{ selected.item }}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>



        <div ng-controller="HomeTestController">
            {{greeting}}
        </div>



    </div>
    


</body>
</html>
